<template>
	<view class="page l_pages">
		<jnavbar :title="'申请分销商'"></jnavbar>
		<scroll-view class="page_container">
			<view style="background-color: #fff;padding: 0 32rpx;height: 100%;">
				<u-form :model="form" ref="uForm">
					<u-form-item prop="name" label-width="160rpx" label="姓名"><u-input v-model="form.name" /></u-form-item>
					<u-form-item prop="mobile" label-width="160rpx" label="手机号"><u-input placeholder="请输入手机号" v-model="form.mobile" /></u-form-item>
					<u-form-item>
						<u-checkbox v-model="is_agree" shape="circle">
							我已阅读并了解《
							<span class="fonst" @click.stop="getProtocol">分销商申请协议</span>
							》
						</u-checkbox>
					</u-form-item>
					<u-button type="primary" @click="agentapply">确认</u-button>
				</u-form>
			</view>
			<u-popup v-model="show" mode="center" width="600rpx" height="800rpx" border-radius="14" :closeable="true">
				<scroll-view class="popup-content" scroll-y>
					<view class="content_title">{{ popupContent.title }}</view>
					<u-parse :tag-style="style" :domain="baseUrl" :html="popupContent.content" :show-with-animation="true"></u-parse>
				</scroll-view>
			</u-popup>
		</scroll-view>
	</view>
</template>

<script>
import http from '@/common/http.js';
import {mapState, mapMutations} from 'vuex';
import base from '@/common/baseUrl.js';
import util from '@/common/util.js';
export default {
	data() {
		return {
			form: {
				name: '',
				mobile: ''
			},
			is_agree: false,
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				mobile: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}
				]
			},
			show: false,
			popupContent: '',
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
		};
	},
	computed: {
		baseUrl() {
			return util.geturl(base.baseUrl);
		},
		...mapState({
			userInfo: state => state.userInfo,
			oss: state => state.oss
		})
	},
	onShareAppMessage() {
		return this.wxShare();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	mounted() {
		this.form.name = this.userInfo.nickname;
	},
	methods: {
		agentapply() {
			if (this.is_agree) {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let params = {
							name: this.form.name,
							mobile: this.form.mobile
						};
						http('/agent/apply', params, 'POST').then(res => {
							if (res.statusCode == 201) {
								const pages = getCurrentPages();
								const prevPage = pages[pages.length - 2];
								if (prevPage.$vm.getagentdetail) {
									prevPage.$vm.getagentdetail();
								}

								uni.navigateBack();
							}
						});
					} else {
					}
				});
			} else {
				uni.showToast({
					title: '请先阅读并同意分销商申请协议',
					icon: 'none'
				});
			}
		},
		// 获取协议的接口 /protocol/:type
		getProtocol() {
			http('/protocol/1', {}, 'get').then(res => {
				this.show = !this.show;
				if (res.data.msg) {
					this.popupContent = res.data.msg;
				} else {
				}
			});
		}
	}
};
</script>

<style lang="scss">
.uni-block-form {
	width: 686rpx;
	border-radius: 12rpx;
	margin-left: 32rpx;
	padding: 16rpx 24rpx;

	.title {
		border-bottom: 1rpx solid #f5f5f5;
		padding: 16rpx 0;
	}

	.item {
		height: 100rpx;

		.label {
			width: 140rpx;
		}

		input {
			border: none;
		}
	}

	.xieyi {
		justify-content: center;
		padding: 16rpx 0;

		checkbox-group {
			display: flex;
			align-items: center;
		}
	}

	.btns {
		justify-content: center;

		text {
			padding: 12rpx 20rpx;
			border-radius: 16rpx;
		}
	}
}

.fonst {
	text-decoration: underline;
	color: #999999;
}
</style>
